import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Row, Col, Descriptions, Typography, Collapse } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import { tableStage_tab, add_type } from '@/common/contact';
const stagePerformance = (props) => {
  const { orderSn, linkType, dispatch } = props
  const { Title, Text } = Typography;
  const { Panel } = Collapse;
  const [data, setData] = useState({
    stageToDistributePerformanceList: [],
    adminToDistributePerformance: {},
    directAdminToDistributePerformanceList: []
  })
  const
    DescriptionsRender = (props) => {
      const { title, value = {}, formItems = [] } = props
      return <Descriptions {...props} title={<Title level={4}>{title}</Title>}>
        {formItems.map((item, index) => {
          const { label, name, render } = item
          if (render) {
            return <Descriptions.Item labelStyle={{ fontSize: 14 }} contentStyle={{ fontSize: 14 }} key={index} label={<Text level={3}>{label}</Text>}>{render(value[name], value)}</Descriptions.Item>
          }
          return <Descriptions.Item labelStyle={{ fontSize: 14 }} contentStyle={{ fontSize: 14 }} key={index} label={<Text level={3}>{label}</Text>}>{value[name]}</Descriptions.Item>
        })}
      </Descriptions>
    }
  const perFormanceItems = [
    {
      title: '员工姓名',
      dataIndex: 'adminName',
    },

    {
      title: '确认状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '待分配',
          1: '已分配',
          2: '已确认'
        }[e]
      }
    },
    {
      title: '员工业绩',
      dataIndex: 'performance',
    },
  ];
  const getColumnsStage = [
    {
      title: '员工姓名',
      dataIndex: 'adminName',
      render: (e, record) => {
        const { selfFlag = '' } = record
        return <div style={{ color: selfFlag === '1' ? 'red' : '' }}>{e}</div>

      }
    },
    {
      title: '当前阶段',
      dataIndex: 'stageInfo',
      render: ({ stageName }) => {
        return stageName
      }
    },
    {
      title: '确认状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '待分配',
          1: '已分配',
          2: '已确认'
        }[e]
      }
    },
    {
      title: '阶段业绩',
      dataIndex: 'stagePerformance',
    },


  ]
  const getColumnsFormance = [
    {
      title: '员工姓名',
      dataIndex: 'adminName',
      render: (e, record) => {
        const { selfFlag = '' } = record
        return <div style={{ color: selfFlag === '1' ? 'red' : '' }}>{e}</div>

      }
    },
    {
      title: '当前阶段',
      dataIndex: 'stageInfo',
      render: ({ stageName }) => {
        return stageName
      }
    },
    {
      title: '复核状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '待复核',
          2: '已复核',

        }[e]
      }
    },
    {
      title: '业绩',
      dataIndex: 'performance',
    },


  ]
  const {
    stageToDistributePerformanceList = [],
    adminToDistributePerformance = {},
    directAdminToDistributePerformanceList = []
  } = data
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = () => {
    dispatch({
      type: 'order/fetchOrderAllPerformance',
      payload: {
        orderSn: orderSn
      },
      callback: (e) => {
        setData(e)
      }
    })
  }
  if (Object.keys(adminToDistributePerformance).length > 0 || stageToDistributePerformanceList.length > 0 || directAdminToDistributePerformanceList.length > 0) {
    return <Collapse ghost bordered={false} defaultActiveKey={['12']}>
      <Panel header={<Title level={4}>业绩详情</Title>} key="12">
        <div style={{ marginBottom: 12 }}>
          {Object.keys(adminToDistributePerformance).length > 0 && <TableDataBlock
            cardProps={
              { title: '订单录入人' }
            }
            // searchItems={searchItems}
            columns={perFormanceItems}
            list={[adminToDistributePerformance]}
            pagination={false}
            rowKey={(record, index) => `${record.index}`}
          ></TableDataBlock>}
        </div>
        {stageToDistributePerformanceList.length > 0 && <div style={{ marginBottom: 12 }}>
          <TableDataBlock
            cardProps={
              { title: '阶段业绩' }
            }
            // searchItems={searchItems}
            columns={getColumnsStage}
            list={stageToDistributePerformanceList}
            pagination={false}
            rowKey={(record, index) => `${record.index}`}
          ></TableDataBlock>
        </div>}
        {directAdminToDistributePerformanceList.length > 0 && <TableDataBlock
          cardProps={
            { title: '单独业绩' }
          }
          // searchItems={searchItems}
          columns={getColumnsFormance}
          list={directAdminToDistributePerformanceList}
          pagination={false}
          rowKey={(record, index) => `${record.index}`}
        ></TableDataBlock>}
      </Panel>
    </Collapse>

  }
  return null
}
export default connect(({ loading, order }) => ({
  loading: loading.models.order,
}))(stagePerformance);